<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>权限列表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../../css/oksub.css">
	<script type="text/javascript" src="../../lib/loading/okLoading.js"></script>
<!--	<script type="text/javascript" src="/ok-admin/pages/member/treetable-lay/demo/layui/layui.js"/>-->
</head>
<body class="ok-body-scroll">
<div class="ok-body">
	<!--面包屑导航区域-->
	<!--<div class="ok-body-breadcrumb">
					<span class="layui-breadcrumb">
							<a><cite>首页</cite></a>
							<a><cite>常用页面</cite></a>
							<a><cite>权限列表</cite></a>
					</span>
			<a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
					<i class="layui-icon layui-icon-refresh"></i>
			</a>
	</div>
	&lt;!&ndash;模糊搜索区域&ndash;&gt;
	<div class="layui-row">
			<form class="layui-form layui-col-md12 ok-search">
					<input class="layui-input" placeholder="开始日期" autocomplete="off" id="startTime">
					<input class="layui-input" placeholder="截止日期" autocomplete="off" id="endTime">
					<input class="layui-input" placeholder="请输入权限名" autocomplete="off">
					<button class="layui-btn" lay-submit="" lay-filter="search">
							<i class="layui-icon layui-icon-search"></i>
					</button>
			</form>
	</div>-->
	<div class="layui-row">
		<div class="layui-col-md3">
			<div id="permissionTree"></div>
		</div>
		<div class="layui-col-md9">
			<table id="permissionTable" lay-filter="tableFilter"></table>
		</div>
	</div>
</div>

<script src="../../lib/layui/layui.js"></script>
<script>

	layui.use(['treeTable',"element", "table", "laydate", "tree", "okUtils", "okMock"], function () {
		let table = layui.table;
		var treeTable = layui.treeTable;
		let laydate = layui.laydate;
		let tree = layui.tree;
		let okUtils = layui.okUtils;
		let okMock = layui.okMock;
		let $ = layui.$;
		okLoading.close();
		laydate.render({elem: '#startTime', type: "datetime"});
		laydate.render({elem: '#endTime', type: "datetime"});
		//树形菜单
		function initPermissionTree() {
			$.post("/perModule/findByUserIdModuleAll",null,function (obj) {
				tree.render({
					elem: '#permissionTree',
					data: obj.moduleTree,
					showCheckbox: true,
					id: 'demoId1',
					// isJump: true,
					click: function (obj) {
						var data = obj.data;
						// layer.msg('状态：' + obj.state + '<br>节点数据：' + JSON.stringify(data));
					}
				});
				//用户下的所有模块包括按钮
				initPermissionTable(obj.moduleList);
			},"json").fail(function (error) {
				console.log(error)
			});
		}

		function initPermissionTable(obj) {
			console.info(obj)
			// 渲染表格  表格树
			treeTable.render({
				method:"post",
				elem: '#permissionTable',
				data: obj,
				toolbar: true,
				tree: {
					iconIndex: 2,
					isPidData: true,
					idName: 'moduleId',
					pidName: 'modModuleId',
					arrowType: 'arrow2',
					getIcon: 'ew-tree-icon-style2',
					openName: 'open'  // 自定义标识是否还有子节点的字段名称
				},
				cols: [[
					{type: 'numbers'},
					{type: 'checkbox'},
					{field: 'moduleName', title: '菜单名称', minWidth: 165},
					{field: 'moduleLocation', title: '菜单地址',align:'center'},
					{field:'icon', title:'图标',align:'center',templet:function (d) {
							if(d.icon == null){
								return ``;
							}else{
								return `<i class="layui-icon ${d.icon}" style="font-size: 25px; "></i>`;
							}
						}}
					,
					{field: 'perms', title: '权限标识',align:'center'},
					{field:'type', title:'类型',align:'center',templet:'#type'},
					{field:'whetherValid', title:'是否有效',align:'center',templet:function (d) {
							if(d.whetherValid == 1){
								return `<a class="layui-btn layui-btn-xs layui-btn-normal">有效</a>`;
							}else if(d.whetherValid == 2){
								return  '<a class="layui-btn layui-btn-xs layui-btn-danger">无效</a>';
							}
						}},
					{fixed: 'right',field:'comments', title:'权限说明',align:'center',width:200},
					// {align: 'center', toolbar: '#operationTpl', title: '操作', width: 120}

				]],
				style: 'margin-top:0;',
				page:true
			});
		}

		initPermissionTree();

		treeTable.on('tool(permissionTable)', function (obj) {
			var event = obj.event;
			if (event === 'del') {
				console.info(obj)
				if (obj.data.children && obj.data.children.length > 0) return layer.msg('有子级不能删除');
				// obj.del();
				layer.msg('删除成功');
			} else if (event === 'edit') {
				console.info(obj)
				layer.msg('修改成功');
				obj.update({name: '新的名称'});
			}
		});
	});
</script>
<!--行工具栏模板-->
<script type="text/html" id="operationTpl">
	<a href="javascript:" title="编辑" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
	<a href="javascript:" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>

<script type="text/html" id="typeTpl">
	{{#  if(d.type == 0){ }}
	<span class="layui-btn layui-btn-normal layui-btn-xs">目录</span>
	{{#  } else if(d.type == 1){ }}
	<span class="layui-btn layui-btn-warm layui-btn-xs">菜单</span>
	{{#  } else if(d.type == 2) { }}
	<span class="layui-btn layui-btn-danger layui-btn-xs">按钮</span>
	{{#  } }}
</script>

<!-- 表格操作列 -->
<script type="text/html" id="tbBar">
	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script type="text/html" id="type">
	{{# if(d.type=='1'){ }}
	<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="vet">目录</a>
	{{# } else if(d.type=='2'){ }}
	<a class="layui-btn layui-btn-xs layui-btn-warm">菜单</a>
	{{# } else if(d.type=='3'){ }}
	<a class="layui-btn layui-btn-xs layui-btn-danger">按钮</a>
	{{# } }}
</script>

</body>
</html>
